<template>
  <!-- 产品质量报表 -->
  <div class="productQuality">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item prop="queryDate" label="统计周期">
            <el-date-picker
              v-model="formData.queryDate"
              type="daterange"
              opt
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              operator=">"
              :limite="new Date()"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane
              :table-config="tableConfig"
              :query-data-fun="queryHandle"
              filename="产品质量报表"
            >导出</ExportPane>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="table"
        no-request
        :other-filters="otherFilters"
        :table-config="tableConfig"
      >
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { filtersRaw } from '@/utils'
import ExportPane from '@/components/ExportPane'
import { ccDict } from '@/api/dataDict'
export default {
  name: 'ReportFormProductQuality',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ExportPane
  },
  data() {
    const validatorQueryDate = (r, v, c) => {
      if (v instanceof Array && v.length > 0) {
        c()
      } else {
        c(new Error('请选择统计周期'))
      }
    }
    return {
      formData: {
        queryDate: []
      },
      otherFilters: [],
      formRules: {
        queryDate: [
          {
            required: true,
            type: 'array',
            message: '请选择统计周期',
            trigger: 'change'
          },
          { validator: validatorQueryDate, trigger: 'change' }
        ]
      },
      tableConfig: {
        interfacePath: '/call-center/api/v1/report/product/page',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: []
      },
      baseSetting: [
        {
          prop: 'productMode',
          label: '产品型号'
        },
        {
          prop: 'workOrderCount',
          label: '工单总量'
        }
      ],
      prodProblemList: []
    }
  },
  mounted() {},
  created() {
    this.$set(this.tableConfig, 'setting', this.baseSetting)
    this.getProdProblem()
  },
  methods: {
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const list = []
        for (const [k, v] of Object.entries(this.formData)) {
          if (k === 'queryDate') {
            if (v instanceof Array && v.length > 0) {
              list.push(filtersRaw(k, v[0], '>='))
              list.push(filtersRaw(k, v[1], '<='))
            }
          }
        }
        this.otherFilters = list
        // return
        if (type !== 'export') {
          this.refresh(type)
        }
        return list
      })
    },
    // 刷新数据
    refresh(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 获取问题字典设置表头
    getProdProblem() {
      ccDict('PRODUCT_PROBLEM').then((res) => {
        this.prodProblemList = res.data
        const fields = []
        const formatData = function(dictCode) {
          return (row) => {
            const v = row[dictCode]
            return v || 0
          }
        }
        for (const d of res.data) {
          fields.push({
            // prop: d.dictCode, // 导出字段顺序乱
            prop: Math.floor(Math.random() * 0xfffffff).toString(16),
            label: d.dictName,
            formatData: formatData(d.dictCode)
          })
        }
        fields.push({
          prop: Math.floor(Math.random() * 0xfffffff).toString(16),
          label: '未选择',
          formatData: formatData('-1')
        })
        this.$set(this.tableConfig, 'setting', [...this.baseSetting, ...fields])
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
